<template>
  <div>
    <div class="LXtop"></div>
    <el-row>
      <el-col :span="24">
          <div class="grid-content bg-purple-dark">
              中国历史上有很长的饮茶纪录，已经无法确切地查明到底是在什么年代了，但是大致的时代是有说法的。并且<br> 也可以找到证据显示，确实在世界上的很多地方饮茶的习惯是从中国传过去的。

          </div>
          </el-col>
    </el-row>
    <div class="LXfs">
        <div class="LXfs_child">
           <span class="el-icon-message"></span>
           <h4>邮箱</h4>
           <p>info@email.com</p>
        </div>
       <div class="LXfs_child">
           <span class="el-icon-phone-outline"></span>
           <h4>手机</h4>
           <p>info@email.com</p>
        </div>
        <div class="LXfs_child" style="border-right:none;">
           <span class="el-icon-map-location
"></span>
           <h4>地址</h4>
           <p>info@email.com</p>
        </div>
    </div>
    <div class="Mtp">
      <mt></mt>
    </div>
  </div>
</template>
<script>
  import mt from "../component/mt.vue";

  export default {
    components: { mt },
    data() {
        return {
            arrTWO:[

            ]
        }
    },
  };
</script>
<style>
.LXfs_child span{
    display: block;
    font-size: 100px;
    text-align: center;
    color: #767676;
}
.LXfs_child h4{
    text-align: center;
    line-height: 50px;
}
.LXfs_child p{
     text-align: center;
     line-height: 50px;
      color: #767676;
}
.LXfs_child{
    border-right: 1px solid #808080;
    vertical-align: middle;

}
.LXfs{
    min-height: 300px;
    display: flex;
    justify-content: space-around;
    padding: 0 100px;
}
.LXfs div{
   width: 300px;
    height: 200px;
    
}
.grid-content{
    text-align: center;
    font-size: 14px;
    padding: 60px 0px;
    line-height: 1.5em;
    color: #808080;;
}
  .LXtop {
    width: 100%;
    min-height: 250px;
    margin-top: 100px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDUvNTYzNGI5ZDFlYmFkNzBkY2FlZmM1NDM0MWE0YzNkYWEtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp");
  }
  .Mtp {
    z-index: 9;
    overflow: hidden;
    user-select: none;
    width: 80%;
    height: 400px;
    margin: auto;
    margin-bottom: 60px;
  
  }
</style>
